<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carouselId">
          <img style="height:460px;" :src="item.imgPath" :alt="item.describes" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->

    <div class="main-box">
      <div class="main">
        <div class="phone">
          <div class="box-hd box-hd1">
            <div class="title">特卖生鲜</div>
          </div>
          <div class="box-bd box-bd1">
            <div class="list">
              <MyList :list="sell" :isMore="true"></MyList>
            </div>
          </div>
        </div>

        <div class="phone">
          <div class="box-hd box-hd1">
            <div class="title">时令新品</div>
          </div>
          <div class="box-bd box-bd1">
            <div class="list">
              <MyList :list="prefer" :isMore="true"></MyList>
            </div>
          </div>
        </div>

        <div class="accessory" id="promo-menu">
          <div class="box-hd box-hd2">
            <div class="title">发现好货</div>
          </div>
          <div class="box-bd box-bd2">
            <div class="list">
              <MyList :list="accessoryList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      carousel: "",
      sell: "",
      prefer: "",
      accessoryList: "",
      accessoryHotList: "",
      accessoryActive: 1
    };
  },
  watch: {
    accessoryActive: function(val) {
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        this.accessoryList = this.accessoryHotList;
        return;
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      await this.$axios
      .get("/api/resources/carousel", {})
      .then(res => {
        this.carousel = res.data.data;
      })
      .catch(err => {
        return Promise.reject(err);
      });
      await this.getPromo(1, "sell");
      await this.getPromo(5, "prefer");
      await this.getHot(
        "accessoryList"
      );
    },
    // 获取配件模块子组件传过来的数据
    getChildMsg2(val) {
      this.accessoryActive = val;
    },
    // 获取各类商品数据方法封装
    async getPromo(categoryId, val) {
      let api = "/api/product/category/limit/" + categoryId;
      await this.$axios
        .get(api)
        .then(res => {
          this[val] = res.data.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    async getHot(val) {
      let api = "/api/product/category/hot";
      await this.$axios
        .get(api)
        .then(res => {
          this[val] = res.data.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>